<template>
  <div class="h-full flex-col">
    <SearchForm @handle-reset="resetParams" @handle-search="getList">
      <el-form :model="searchForm" inline>
        <el-form-item label="시간선택">
          <MyCombinePiker :dateTimeRange="_dateTimeRange" @changeHandle="timePickChangeHandle" />
        </el-form-item>
        <el-form-item label="검색조건">
          <el-select v-model="searchForm.level" placeholder="전체" clearable class="w-220px">
            <el-option
              v-for="item in levelMap"
              :key="item.id"
              :label="item.value"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </SearchForm>
    <div class="page-card h-full" v-loading="loading">
      <MyTable :isPagination="false" :tableData="tableData" :tableColumn="tableColumn" v-slot="sp">
        <el-table :data="tableData" :highlight-current-row="true">
          <el-table-column
            v-if="sp.ctc.includes('정산시간')"
            label="정산시간"
            prop="date"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('회원등급')"
            label="회원등급"
            prop="player_level"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('등급명')"
            label="등급명"
            prop="player_level_value"
            align="center"
          />
          <el-table-column
            v-if="sp.ctc.includes('머니이동 입금')"
            label="머니이동 입금"
            align="center"
            width="150"
            prop="transfer_in_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.transfer_in_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('머니이동 출금')"
            label="머니이동 출금"
            align="center"
            width="150"
            prop="transfer_out_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.transfer_out_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('쿠폰금액')"
            label="쿠폰금액"
            align="center"
            prop="coupon_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.coupon_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('보너스금액')"
            label="보너스금액"
            align="center"
            prop="bonus_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.bonus_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('입금액')"
            label="입금액"
            align="center"
            prop="recharge_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.recharge_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('출금액')"
            label="출금액"
            align="center"
            prop="withdraw_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.withdraw_sum) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('입출금차액')" label="입출금차액" align="center">
            <template #default="{ row }">
              <el-tag :type="row.rechargeSubWithdraw > 0 ? 'danger' : 'success'">
                {{ formatNumber(row.rechargeSubWithdraw) }}
              </el-tag>
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('총배팅금액')"
            label="총배팅금액"
            align="center"
            prop="bet_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.bet_sum) }}
            </template>
          </el-table-column>

          <el-table-column
            v-if="sp.ctc.includes('총적중금액')"
            label="총적중금액"
            align="center"
            prop="payout_sum"
            sortable
          >
            <template #default="{ row }">
              {{ formatNumber(row.payout_sum) }}
            </template>
          </el-table-column>

          <el-table-column v-if="sp.ctc.includes('손익금GGR')" label="손익금GGR" align="center">
            <template #default="{ row }">
              <el-tag :type="row.betSubPayout > 0 ? 'danger' : 'success'">
                {{ formatNumber(row.betSubPayout) }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </MyTable>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import { useTable } from '@/hooks/useTable';
import { statLevelApi } from '@/api/statistic/index';
import { formatNumber, dataTimeRangeCurTwo, dateTransToSeoulTime } from '@/utils/util';
import { levelMap } from '@/utils/gameUtil';
import MyTable from '@/components/MyTable';
import { useMyDateRange } from '@/hooks/useMyDateRange';
import MyCombinePiker from '@/components/MyCombinePiker';

const tableColumn = ref([
  '정산시간',
  '회원등급',
  '등급명',
  '머니이동 입금',
  '머니이동 출금',
  '쿠폰금액',
  '보너스금액',
  '입금액',
  '출금액',
  '입출금차액',
  '총배팅금액',
  '총적중금액',
  '손익금GGR'
]);

const _dateTimeRange = dataTimeRangeCurTwo(-3);

const searchForm = reactive({
  level: '',
  start_ts: dateTransToSeoulTime(_dateTimeRange[0]),
  end_ts: dateTransToSeoulTime(_dateTimeRange[1])
});

const timePickChangeHandle = (timestamp: number, type: string) => {
  searchForm[type] = timestamp;
};

const dataCallBack = (data: any) => {
  let _data = data.data.stats;

  _data = _data.map((item) => {
    const _itemFilter = levelMap.filter((levelItem) => levelItem.id == item.player_level);
    item.player_level_value = _itemFilter[0] ? _itemFilter[0]['value'] : '';
    item.rechargeSubWithdraw = item.recharge_sum - item.withdraw_sum;
    item.betSubPayout = item.bet_sum - item.payout_sum;
    return item;
  });

  return _data;
};

const { tableData, loading, resetParams, getList } = useTable({
  apiFn: statLevelApi,
  params: searchForm,
  callback: dataCallBack,
  isPageable: false
});
</script>

<style lang="scss" scoped></style>
